<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    
    <!-- jQuery and jQuery Mobile includes -->
    <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    <!-- Highcharts -->
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    
    <!-- Custom content -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="script/md5.js"></script>
    <script src="script/util.js"></script>
    <script src="script/interface.js"></script>
    <script src="script/graph.js"></script>
    <script src="script/main.js"></script>
    
    <!-- Google Analytics -->
    <script src="script/googleanalytics.js"></script>
    
    <title>AimHigh Prototype</title>
</head>
<body>
      
<div data-role="page" id="mainPage">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>AimHigh</h1>
        <a href="#createTask" class="ui-btn-right" data-rel="dialog" data-transition="pop" data-icon="plus">New Task</a>
    </div>
    <div data-role="content">
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <h1 class="text-center">Daily Score: <span id="score"></span></h1>
            </div>
            <div class="ui-block-b">
                <a href="#pageStats" class="align-right" id="statsButton" data-role="button" data-rel="dialog" data-transition="pop" data-icon="search" data-inline="true">Statistics</a>
            </div>
        </div>
        <p id="introduction">AimHigh helps to build habits by giving you a daily score. Simply enter what you want to do on a daily basis. Mark what you've done and see your progress over time.</p>
        
        <div id="categories"></div>
    </div>

    <div data-role="footer" data-position="fixed">
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <h4 class="text-center">Reach your goals, build new habits!</h4>
            </div>
            <div class="ui-block-b">
                <label for="selectedDate" class="ui-hidden-accessible">Date:</label>
                <input type="date" class="date align-right" id="selectedDate"/>
            </div>
        </div>
    </div>
</div> 
    
<div data-role="page" id="createTask">
    <div data-role="header" data-position="fixed">
        <h1>New Task</h1>
    </div>
    <div data-role="content">
        <p>Let's create a new Task!</p>
        <label for="title" class="ui-hidden-accessible">Title:</label>
        <input type="text" id="createTitle" placeholder="Title"  />
        <label for="text" class="ui-hidden-accessible">Text:</label>
        <input type="text" id="createText" placeholder="Text"  />
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <label for="category" class="ui-hidden-accessible">Category:</label>
                <input type="text" id="createCategory" placeholder="Category"  />
            </div>
            <div class="ui-block-b">
                <div class="align-right">
                    <label for="isNegative">Negative Task?</label>
                    <select id="createIsNegative" data-role="slider">
                            <option value="positive" selected>No</option>
                            <option value="negative">Yes</option>
                    </select>
                </div>
            </div>
        </div>
        <span style="padding:10px;"></span>
        <hr>
        <a href="#" data-role="button" data-rel="back" id="newTaskSubmit" data-theme="b">Submit</a>
        <a href="#" data-role="button" data-rel="back" data-theme="a">Cancel</a>
    </div>
</div>
    
<div data-role="page" id="pageStats">
    <div data-role="header" data-position="fixed">
        <h1>Statistics</h1>
    </div>
    <div data-role="content">
        <div id="graph" class="align-center"></div>
        <a href="#" data-role="button" data-rel="back" data-theme="b">Ok!</a>
    </div>
</div>        
    
<div data-role="page" id="editTask">
    <div data-role="header" data-position="fixed">
        <h1>Edit Task</h1>
    </div>
    <div data-role="content">
        <p>Change the Task!</p>
        <label for="title" class="ui-hidden-accessible">Title:</label>
        <input type="text" id="editTitle" placeholder="Title"  />
        <label for="text" class="ui-hidden-accessible">Text:</label>
        <input type="text" id="editText" placeholder="Text"  />
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <label for="category" class="ui-hidden-accessible">Category:</label>
                <input type="text" id="editCategory" placeholder="Category"  />
            </div>
            <div class="ui-block-b">
                <div class="align-right">
                    <label for="isNegative">Negative Task?</label>
                    <select id="editIsNegative" data-role="slider">
                            <option value="positive" selected>No</option>
                            <option value="negative">Yes</option>
                    </select>
                </div>
            </div>
        </div>
        <span style="padding:10px;"></span>
        <hr>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <a href="#" data-role="button" data-rel="back" id="deleteTaskSubmit" data-theme="b">Delete</a>
            </div>
            <div class="ui-block-b">
                <div class="align-right">
                    <a href="#" data-role="button" data-rel="back" id="editTaskSubmit" data-theme="b">Edit</a>
                </div>
            </div>
        </div>
        <a href="#" data-role="button" data-rel="back" data-theme="a">Cancel</a>
    </div>
</div>
    
</body>
</html>
